<style lang="less">
	@import "./main.less";
</style>
<template>
	<div class="main" :class="{'main-hide-text': shrink}">
		<div class="sidebar-menu-con">
			<shrinkable-menu 
				:shrink="shrink"
				@on-change="handleSubmenuChange"
				:theme="menuTheme" 
				:before-push="beforePush"
				:open-names="openedSubmenuArr"
				:menu-list="menuList"
				:style="{width: shrink?'60px':'200px', overflow: shrink ? 'visible' : 'auto'}"
				>
				<div slot="top" class="logo-con">
					<h1>商户管理系统</h1>
				</div>
			</shrinkable-menu>
			
		</div>
		<div class="main-header-con">
			<div class="main-header">
				<div class="navicon-con">
					<Button :style="{transform: 'rotateZ(' + (this.shrink ? '-90' : '0') + 'deg)'}" type="text" @click="toggleClick">
						<Icon type="navicon" size="32"></Icon>
					</Button>
				</div>
				<!-- <div class="header-middle-con">
					<div class="main-breadcrumb">
						<breadcrumb-nav :currentPath="currentPath"></breadcrumb-nav>
					</div>
				</div> -->
				<div class="header-avator-con">
					<!-- <full-screen v-model="isFullScreen" @on-change="fullscreenChange"></full-screen>
					<lock-screen></lock-screen> -->
					<dd class="username lh60">
						<a href="javascript:void(0)">
							<span class="main-user-name">管理员：{{ userName }}</span>
						</a>
					</dd>
					<div class="mes">
						<message-tip v-model="mesCount"></message-tip>
					</div>
					<div class="user-dropdown-menu-con">
						<Row justify="center" align="middle" class="user-dropdown-innercon">                
							<Dropdown transfer trigger="click" @on-click="handleClickUserDropdown">
								<Avatar :src="avatorPath" style="background: #619fe7;"></Avatar>
								<DropdownMenu slot="list">
									<DropdownItem name="userInfo" style="overflow:hidden;text-overflow:ellipsis;">
										<Avatar :src="avatorPath"></Avatar>
										{{ userName }}
									</DropdownItem>
									<!-- <DropdownItem name="account_balance">
										<i style="background: url('../../src/images/rmb.png') no-repeat center"></i>
										账户余额
									</DropdownItem> -->
									<DropdownItem name="editPwd">
										<i style="background: url('../../src/images/lock.png') no-repeat center"></i>
										修改密码
										</DropdownItem>
									<DropdownItem style="border-bottom:none;" name="modalPhone">
										<i style="background: url('../../src/images/phone.png') no-repeat center"></i>
										修改手机号
									</DropdownItem>
								</DropdownMenu>
							</Dropdown>    
						</Row>
					</div>
					<div class="question lh60" @click="toHelp">
						<div class="ivu-tooltip">
							<Tooltip content="帮助中心" placement="bottom">
								<Icon type="ios-help-outline" :size="22"></Icon>
							</Tooltip>
						</div>
					</div>
					<div class="off lh60" @click="handleClickUserDropdown('loginout')">
						<div class="ivu-tooltip">
							<Tooltip content="退出登录" placement="bottom">
								<Icon type="log-out" :size="18"></Icon>
							</Tooltip>
						</div>
					</div>
				</div>
			</div>
			<!-- <div class="tags-con">
				<tags-page-opened :pageTagsList="pageTagsList"></tags-page-opened>
			</div> -->
		</div>
		<div class="single-page-con" :style="{left: shrink?'60px':'200px'}">
			<div class="single-page">
				<breadcrumb-nav  :currentPath="currentPath" class="bread" v-if="breadShow"></breadcrumb-nav>
				<transition name="fade" mode="out-in">
						<router-view></router-view>
				</transition>
			</div>
		</div>
		<div class="modal">
			<Modal v-model="modalShow" width="370" :mask-closable="false" >
				<p slot="header" class="modalheader">
					<span>手机号更换</span>
				</p>
				<div class="modal-container">
					<p>为了保证你的账户安全，变更手机号之前需要验证身份</p>
					<Form ref="updateForm" :rules="rules" :model="mesCode">
						<p>短信验证</p>
						<FormItem>
							<Input readonly :value="phone" disabled></Input>
						</FormItem>
						<FormItem class="check-mes" prop="vidateCode">
							<Input placeholder="请输入验证码" v-model="mesCode.vidateCode"></Input>
							<Button class="check-btn" @click="handleVality" v-if="show">{{ codeText }}</Button>
							<Button class="check-btn" v-else>{{ count }}后重新获取</Button>
						</FormItem>
						<FormItem prop="phoneVal">
							<Input placeholder="输入新手机号码" v-model="mesCode.phoneVal" :maxlength="11"></Input>
						</FormItem>
					</Form>
				</div>
				<div slot="footer">
					<i-button type="primary" size="large" @click="EditPhoneNext" style="width:146px;height:35px;">确定</i-button>
				</div>
			</Modal>
			<Modal v-model="ePwd" width="365" :mask-closable="false">
				<h3 slot="header">修改密码</h3>
				<div class="pwd-container" v-show="!isShow">
					<p>为了保证你的账户安全，修改密码之前需要验证原密码</p>
					<Form>
						<i-input placeholder="请输入原密码" :type="type" v-model="oldPwd"></i-input>
						<Button type="ghost" @click="togglePwd">显示密码</Button>
					</Form>
				</div>
				<div class="pwd-container" v-show="isShow">
					<p>输入新的登录密码</p>
					<Form>
						<Input placeholder="输入新密码" v-model="newPwd" :type="type"></Input>
					<Button type="ghost" @click="togglePwd">显示密码</Button>
					</Form>
				</div>
				<div slot="footer">
					<Button type="primary" class="pwd-btn" @click="next">确定</Button>
				</div>
			</Modal>
		</div>    
	</div>
</template>
<script>
	import shrinkableMenu from './main-components/shrinkable-menu/shrinkable-menu.vue';
	import breadcrumbNav from './main-components/breadcrumb-nav.vue';
	import messageTip from './main-components/message-tip.vue';
	import Cookies from 'js-cookie';
	import util from '@/libs/util.js';

	export default {
		components: {
			shrinkableMenu,
			breadcrumbNav,
			messageTip
		},
		data () {
			const validatePhone = (rule, value, callback) => {
				const reg = /^[1][3,4,5,7,8][0-9]{9}$/
				if (reg.test(value)) {
					callback()
				} else {
					callback(new Error('手机号码格式不对哟~'))
				}
			}
			return {
				shrink: false,
				userName: Cookies.get('merchant_user'),
				phone: '***********',
				isFullScreen: false,
				openedSubmenuArr: this.$store.state.app.openedSubmenuArr,
				modalShow:false, //模态修改手机号码控制
				isShow: false, //下一步切换
				breadShow: false, // 控制首页面包屑显示隐藏
				ePwd: false,  //模态密码修改控制
				type: 'password',   //密码隐藏显示
				oldPwd: '',
				newPwd: '',
				codeText: '获取验证码',
				show: true,
				editPhoneShow: false,
				count: '',
				timer: null,
				mesCode: {
					vidateCode: '',
					phoneVal: ''
				},
				rules: {
					vidateCode: [{ required: true, tigger: 'blur', message: '请输入验证码' }],
					phoneVal: [{ required: true, tigger: 'blur', validator: validatePhone }]
				}
			}
		},
		computed: {
			menuList () {
				return this.$store.state.app.menuList;
			},
			pageTagsList () {
				return this.$store.state.app.pageOpenedList; // 打开的页面的页面对象
			},
			currentPath () {
				return this.$store.state.app.currentPath; // 当前面包屑数组
			},
			avatorPath () {
				return localStorage.avatar;
			},
			cachePage () {
				return this.$store.state.app.cachePage;
			},
			lang () {
				return this.$store.state.app.lang;
			},
			menuTheme () {
				return this.$store.state.app.menuTheme;
			},
			mesCount () {
				return this.$store.state.app.messageCount;
			}
		},
		methods: {
			init(){
				let pathArr = util.setCurrentPath(this, this.$route.name);  //获取面包屑导航数据
				this.$route.path === '/home' || this.$route.path === '/home/' ? this.breadShow = false : this.breadShow = true; //判断是否是首页 如果是则不显示面包屑 否则显示
				this.$store.dispatch('handleGetMessage')
			},
			toggleClick () {
				this.shrink = !this.shrink;
			},
			handleClickUserDropdown (name) {
				if (name === 'userInfo') {
					util.openNewPage(this, 'ownspace_index');
					this.$router.push({
						name: 'ownspace_index'
					});
				} else if (name === 'loginout') {
					// 退出登录
					this.$store.dispatch('loginout').then(() => {
						this.$router.push({ name: 'login' });
					})
				} else if (name === 'modalPhone') {
					this.modalShow = true;
					this.$store.dispatch('handleGetPhoneInit').then((e) => {
						this.phone = e
					})
				} else if (name === 'editPwd'){
					this.ePwd = true;
				} else if (name === 'account_balance'){
					this.$router.push({name: 'account_balance'});
				}
			},
			checkTag (name) {
				let openpageHasTag = this.pageTagsList.some(item => {
					if (item.name === name) {
						return true;
					}
				});
				if (!openpageHasTag) { //  解决关闭当前标签后再点击回退按钮会退到当前页时没有标签的问题
					util.openNewPage(this, name, this.$route.params || {}, this.$route.query || {});
				}
			},
			handleSubmenuChange (val) {
				// console.log(val)
			},
			beforePush (name) {
				// if (name === 'accesstest_index') {
				//     return false;
				// } else {
				//     return true;
				// }
				return true;
			},
			fullscreenChange (isFullScreen) {
				// console.log(isFullScreen);
			},
			next(){
				if(!this.isShow) {
					this.$store.dispatch('hacdlePassWordEdit', this.oldPwd).then((response) => {
						if (response.data.code === 1) {
							this.$Message.error(response.data.message)
						} else {
							this.isShow = true
						}
					})
				} else {
					this.$store.dispatch('handleUpdateEditPassword', this.newPwd).then(response => {
						if (response.data.code === 0) {
							this.$Message.success(response.data.message)
							this.newPwd = ''
							this.oldPwd = ''
							this.isShow = false
							this.$store.dispatch('loginout').then(() => {
								this.$router.push({ name: 'login' });
							})
						} else {
							this.$Message.error(response.data.message)
						}
					})
				}
			},
			togglePwd(){
				this.type === 'password' ? this.type = 'text' : this.type = 'password';
			},
			toHelp(){
				this.$router.push({name:'help'})
			},
			handleVality() {
				this.$store.dispatch('handleGetPhoneCode').then(response => {
					if (response.data.code === 0) {
						this.$Message.success('验证码发送成功~')
						const TIME_COUNT = 60;
						if (!this.timer) {
							this.count = TIME_COUNT;
							this.show = false;
							this.timer = setInterval(() => {
							if (this.count > 0 && this.count <= TIME_COUNT) {
								this.count--;
								} else {
								this.show = true;
								clearInterval(this.timer);
								this.timer = null;
								}
							}, 1000)
						}
					} else {
						this.$Message.error('验证码发送失败~')
					}
				})
			},
			EditPhoneNext() {
					this.$refs['updateForm'].validate((valid) => {
						if (valid) {
							this.$store.dispatch('handlePostEditPhone', this.mesCode).then(response => {
								if (response.data.code === 0) {
									this.$Message.success(response.data.message)
									this.$refs['updateForm'].resetFields()
									this.modalShow = false
								} else {
									this.$Message.error(response.data.message)
								}
							})
						}
					})
			}
		},
		watch: {
			'$route' (to) {
				let pathArr = util.setCurrentPath(this, to.name);
				localStorage.currentPageName = to.name;
				this.$route.path === '/home' || this.$route.path === '/home/' ? this.breadShow = false : this.breadShow = true;
			}
		},
		mounted() {
			this.init();
		}
	}
</script>
